<template>
  <div class="container">
    <div class="content">
      <div class="title">
        <div class="line"></div>
        <div class="title-text">社零</div>
      </div>
      <div id="myChartSales" :style="{width:'100%',height:'527px'}"></div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Sales',
  data () {
    return {
      // optionsDataXItem1: [1200, 1400, 2520, 5620, 3700, 1100, 3512, 3700],
      // optionsDataYItem3: [30, 50, 60, 70, 80, 90, 50, 30, 20],
      // optionsDataYItem4: [60, 70, 80, 90, 50, 30, 60, 15, 36],
      name: [],
      value: []
    }
  },
  props: {
    list: Array
  },
  methods: {
    Sales () {
      const myChartSales = this.$echarts.init(document.getElementById('myChartSales'))
      myChartSales.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          formatter (p) {
            // console.log(p)
            return `${p[0].marker} ${p[0].value} 万元`
          }
        },
        grid: {
          bottom: '20%',
          top: 30
        },
        legend: {
          show: true,
          // data: ['当月零售额', '累计零售额', '当月增速', '累计增速'],
          data: ['累计零售额'],
          bottom: '6%'
        },
        xAxis: [
          {
            type: 'category',
            data: this.name,
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#DCDCDC'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#333',
                fontSize: 13
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // min: 0,
            // max: 12000,
            // interval: 1000,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#DCDCDC'
              }
            },
            axisLabel: {
              formatter: '{value} 万元',
              textStyle: {
                color: '#333',
                fontSize: 12
              }
            }
          }
          // {
          //   type: 'value',
          //   min: -100,
          //   max: 300,
          //   interval: 50,
          //   splitLine: {
          //     show: false
          //   },
          //   axisLabel: {
          //     formatter: '{value} .00%',
          //     textStyle: {
          //       color: '#333',
          //       fontSize: 12
          //     }
          //   }
          // }
        ],
        series: [
          // {
          //   name: '当月零售额',
          //   type: 'bar',
          //   data: optionsDataXItem1,
          //   barWidth: 27, // 设置柱子的宽度,
          //   color: {
          //     type: 'linear',
          //     x: 0,
          //     y: 0,
          //     x2: 0,
          //     y2: 1,
          //     colorStops: [
          //       {
          //         offset: 0,
          //         color: '#5DE3D6' // 0% 处的颜色
          //       },
          //       {
          //         offset: 1,
          //         color: '#4DB6AC' // 100% 处的颜色
          //       }
          //     ],
          //     globalCoord: false // 缺省为 false
          //   }
          // },
          {
            name: '累计零售额',
            type: 'bar',
            data: this.value,
            barWidth: 27, // 设置柱子的宽度,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#7BBCF6' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#188DF0' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          }
          // {
          //   name: '当月增速',
          //   symbol: 'line',
          //   type: 'line',
          //   yAxisIndex: 1,
          //   data: optionsDataYItem3,
          //   itemStyle: {
          //     normal: {
          //       lineStyle: {
          //         width: 2 // 设置线条粗细
          //       }
          //     }
          //   },
          //   color: '#103BAB'
          // },
          // {
          //   name: '累计增速',
          //   type: 'line',
          //   symbol: 'line',
          //   yAxisIndex: 1,
          //   data: optionsDataYItem4,
          //   itemStyle: {
          //     normal: {
          //       lineStyle: {
          //         width: 2 // 设置线条粗细
          //       }
          //     }
          //   },
          //   color: '#F76363'
          // }
        ]
      })
      window.addEventListener('resize', () => {
        myChartSales.resize()
      })
    },
    getInfo () {
      this.name = this.list.map((i) => {
        return i.quota_name
      })
      this.value = this.list.map((i) => {
        return i.current_value
      })
    }
  },

  mounted () {
    this.getInfo()
    this.Sales()
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  .content {
    height: 561px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0px -8px 39px 1px rgba(230, 230, 230, 0.5),
      0px 8px 39px 1px rgba(230, 230, 230, 0.5);
    border-radius: 20px;
    .title {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 17px 0 10px 20px;
      .line {
        width: 7px;
        height: 24px;
        background: #1492ff;
        border-radius: 4px;
        margin-right: 7px;
      }
      .title-text {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}
</style>
